<template>
    <div class="main">
            <img src="http://www.dell-lee.com/imgs/vue3/user.png" class="main_img"/>
            <div class="main_input-text"><input type="text" placeholder="请输入用户名" v-model="datas.userName" @blur="textTest"><span class="iconfont" v-html="err.errorIcon"></span></div>
            <p class="errorText">{{err.errorText}}</p>
            <div class="main_input-password"><input type="password" placeholder="请输入密码" v-model="datas.password" @blur="passwordTest"><span class="iconfont" v-html="err.errorIcon2"></span></div>
            <p class="errorText">{{err.errorText2}}</p>
            <div class="main_input-password" v-show='show'><input type="password" placeholder="确认密码" v-model="confirmPw" @blur="confirmPasseord"><span class="iconfont" v-html="err.errorIcon3"></span></div>
            <p class="errorText">{{err.errorText3}}</p>
            <button class="main_button" @click="tgr">{{text}}</button>
            <slot></slot>
            <Toast v-if="data.toastShow" :toastText='data.toastText'/>
        </div>
</template>

<style lang="scss" scoped>
@import '../../assets/style/public.scss';
.main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    .iconfont{
      margin-left: .14rem;
      font-size: .2rem;
      color: red;
    }
}
.main_img{
    width: .66rem;
    height: .66rem;
    margin-bottom: .4rem;
}
.main_input-text,.main_input-password,.main_button{
    width: 2.95rem;
    height: .48rem;
    background-color: #F9F9F9;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 6px;
    margin-bottom: .16rem;
    font-size: .16rem;
    color:$log-color;
    text-align: left;
}
.main_input-text,.main_input-password{
   input{
       box-sizing: border-box;
      width: 80%;
      height: 100%;
      outline: none;
      border: none;
      margin-left: .16rem;
    background-color: #F9F9F9;
   }
}
.main_button{
    text-align: center;
    color: #ffffff;
    background-color:  #0091FF;
    margin-top: .16rem;
    outline: none;
}
.errorText{
  text-align: left;
  color: red;
}
</style>

<script>
import { reactive, ref, toRefs } from '@vue/reactivity'
import axios from 'axios'
import Toast, { userToastEffect } from '../../components/toast/toast.vue'

// 数据（如果数据太多建议用对象）
const { data, toastShow } = userToastEffect()
const datas = reactive({ userName: '', password: '' })
const confirmPw = ref('')
const err = reactive({
  errorText: '',
  errorIcon: '',
  errorText2: '',
  errorIcon2: '',
  errorText3: '',
  errorIcon3: ''
})
const test = {
  userReg: false,
  passwordReg: false,
  confirm: true
}

export default {
  name: 'Log',
  components: {
    Toast
  },
  props: {
    text: {},
    sw: {},
    confirm: {
      type: Boolean,
      default: true
    }
  },

  setup (props, content) {
    const show = toRefs(props).sw.value
    const confirms = toRefs(props).confirm.value
    test.confirm = confirms

    // 自定义方法初始化数据
    init()

    // 向父组件触发事件
    function tgr () {
      const { userReg, passwordReg, confirm } = test
      if (userReg && passwordReg && confirm) {
        content.emit('log', datas)
      } else { toastShow('请认真填写您的信息') }
    }

    // 用户名验证
    function textTest () {
      formTest({
        el: datas.userName,
        text: '用户名不能为空',
        text2: '用户名只能由6~12位字母、数字和下划线组成',
        reg: /^\w{6,12}$/,
        id: 1
      })
    }

    // 密码验证
    function passwordTest () {
      formTest({
        el: datas.password,
        text: '密码不能为空',
        text2: '密码只能由6~12位字母、数字和符号组成',
        reg: /^[^\u4e00-\u9fa5\s]{6,12}$/,
        id: 2
      })
    }

    // 确认密码
    function confirmPasseord () {
      formTest({
        el: confirmPw.value,
        text: '确认密码不能为空',
        text2: '密码只能由6~12位字母、数字和符号组成',
        reg: /^[^\u4e00-\u9fa5\s]{6,12}$/,
        confirm: datas.password === confirmPw.value,
        id: 3
      })
    }

    return { tgr, show, data, datas, err, textTest, passwordTest, confirmPasseord, confirmPw }
  }
}

// 数据初始化函数（由于本组件被多个页面引用，会共享input输入框绑定的数据）
function init () {
  datas.userName = localStorage.userName || ''
  datas.password = localStorage.password || ''
  err.errorText = ''
  err.errorIcon = ''
  err.errorText2 = ''
  err.errorIcon2 = ''
  err.errorText3 = ''
  err.errorIcon3 = ''
  confirmPw.value = ''
  test.userReg = localStorage.userName ? 'true' : false
  test.passwordReg = localStorage.password ? 'true' : false
}

// 表单验证公共方法
function formTest (options) {
  const { el, text, text2, reg, id, confirm } = options
  if (el === '') {
    switch (id) {
      case 1: err.errorText = text; err.errorIcon = '&#xe623;'; test.userReg = false; break
      case 2: err.errorText2 = text; err.errorIcon2 = '&#xe623;'; test.passwordReg = false; break
      default: err.errorText3 = text; err.errorIcon3 = '&#xe623;'; test.confirm = false
    }
  } else {
    const regs = reg
    if (regs.test(el)) {
      switch (id) {
        case 1: err.errorText = ''; err.errorIcon = '<span style="color:#5fed06">&#xe8bd;</span>'; test.userReg = true; break
        case 2: err.errorText2 = ''; err.errorIcon2 = '<span style="color:#5fed06">&#xe8bd;</span>'; test.passwordReg = true; break
        default: if (confirm) { err.errorText3 = ''; err.errorIcon3 = '<span style="color:#5fed06">&#xe8bd;</span>'; test.confirm = true } else { err.errorText3 = '两次输入密码不一致'; err.errorIcon3 = '&#xe623;' }
      }
    } else {
      switch (id) {
        case 1: err.errorText = text2; err.errorIcon = '&#xe623;'; test.userReg = false; break
        case 2: err.errorText2 = text2; err.errorIcon2 = '&#xe623;'; test.passwordReg = false; break
        default: err.errorText3 = text2; err.errorIcon3 = '&#xe623;'; test.confirm = false
      }
    }
  }
}

// 登录和注册公用方法
function userLoginEffect (url, success, text, isLogon) {
  async function log (d) {
    try {
      const resule = await axios.post(url, d)
      if (resule.data.errno === 0) {
        if (isLogon) {
          toastShow('注册成功！快去登录吧')
          success()
          // 注册成功后使用本地存储
          localStorage.userName = datas.userName
          localStorage.password = datas.password
        } else {
          success()
          // 登录成功后使用本地存储
          localStorage.userName = datas.userName
          localStorage.password = datas.password
        }
      } else { toastShow(text) }
    } catch (e) {
      toastShow('请求失败')
    }
  }
  return log
}

export { userLoginEffect }
</script>
